<template>
  <div class="class-times-container">
    <!-- <el-dropdown placement="right-start" @command="handle"> -->
      <div :class="['times-item', { 'active': data.isShowDetail }]">
        <div class="item-header" @click="data.isShowDetail = !data.isShowDetail">
          <i :class="[`el-icon-caret-${data.isShowDetail ? 'bottom' : 'right'}`]" />
          <h4>第{{ chinesNumber }}讲</h4>
          <h4>{{ data.indexName }}</h4>
          <span>（<i>{{ data.period }}</i>课时）</span>
          <!-- <div class="icon" @click.stop="edit"><i class="el-icon-edit-outline" /></div>
          <div :class="['icon', {'loading': removeLoading}]" @click.stop="remove"><i :class="[`el-icon-${removeLoading ? 'loading' : 'delete'}`]" /></div> -->
          <div class="actions">
            <template v-if="data.child || (data.child && data.child.handoutId)">
              <el-button size="mini" type="primary" @click.stop="choiceClass(data)" v-if="!data.checked">选择</el-button>
              <el-button size="mini" type="primary" disabled v-else>已备课</el-button>
            </template>
            <template v-else>
            </template>
          </div>
        </div>
        <el-collapse-transition>
          <div class="item-content" v-show="data.isShowDetail">
            <div v-if="data.exam || data.child || data.homework">
              <div class="item-exam" v-if="data.exam">
                <p><span class="tip">进门考</span>  {{ data.exam.title }}</p>
              </div>
              <div class="item-child" v-if="data.child">
                <p><span class="tip">讲义</span> {{ data.child.name }}</p>
              </div>
              <div class="item-homework" v-if="data.homework">
                <p><span class="tip">课堂巩固</span> {{ data.homework.title }}</p>
              </div>
            </div>
            <cus-empty v-else />
            <div class="item-footer"><div>{{ data.difficultPoint || '暂无重难点描述' }}</div></div>
          </div>
        </el-collapse-transition>
        <!-- <el-collapse-transition>
          <div class="item-content" v-show="data.isShowDetail">
            <div class="item-child" v-if="data.child">
              <div class="type-file" v-if="data.child.type === 1">
                <el-avatar shape="square" :src="''" icon="el-icon-files" />
                <p>{{ data.child.name }}</p>
              </div>
              <div class="type-other" v-else>
                <template v-if="knowledgeList.length">
                  <div v-for="item in knowledgeList" :key="item.id">
                    <div class="item-title" @click="item.showChilds = !item.showChilds">
                      <i :class="[`el-icon-caret-${item.showChilds ? 'bottom' : 'right'}`]" />
                      <h4>知识元</h4>
                      <p>{{ item.name }}</p>
                    </div>
                    <el-collapse-transition v-if="item.child">
                      <div class="item-main" v-show="item.showChilds">
                        <div v-for="cell in item.child" :key="cell">
                          <img src="@/assets/plan/knowledge-icon.png" alt="知识点">
                          <p>{{ item.name }}</p>
                        </div>
                      </div>
                    </el-collapse-transition>
                  </div>
                </template>
                <div v-else align-center>
                  <span>该讲义暂无内容</span>
                  ，请点击<el-button type="text" @click.stop="editHandout(data.child.handoutId)">编辑讲义</el-button>
                </div>
              </div>
            </div>
            <cus-empty v-else />
            <div class="item-footer"><div>{{ data.difficultPoint || '暂无重难点描述' }}</div></div>
          </div>
        </el-collapse-transition> -->
      </div>
      <!-- <template #dropdown>
        <h2 style="text-indent: 16px; margin-top: 12px">添加课次:</h2>
        <el-dropdown-menu>
          <el-dropdown-item :command="0">从其他计划选择</el-dropdown-item>
          <el-dropdown-item :command="1">批量添加</el-dropdown-item>
          <el-dropdown-item :command="2">空白课次</el-dropdown-item>
          <el-dropdown-item :command="3">阶段测试</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown> -->
  </div>
</template>

<script lang="ts">
import $ from '$';
import store from './../../store';
import { ElMessageBox } from 'element-plus';
import AddHandoutComponent from './add-handout.vue';
import { computed } from 'vue';

export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  setup(props, { emit }) {

    const handle = (type) => store.dispatch('add_times', { type, index: props.index + 1});

    const chinesNumber = $.math.toChines(props.index + 1);

    let [ removeLoading, setRemoveLoading ] = $.useState(false);

    let knowledgeList = computed(() => props.data?.child?.type !== 1 ? props.data.child?.childs : null);

    const edit = async () => {
      let formGroup = await $.modal.create({  title: '修改课次', width: 400, zIndex: 2015, props: { nodes: [
        { label: '名称', default: props.data.indexName, type: 'input', key: 'indexName', rule: [{ required: true, message: '请输入名称' }] },
        { label: '课时', default: props.data.period, type: 'number', key: 'period', min: 1, step: 1, strictly: true, rule: [{ required: true, message: '请输入课时数' }] },
        { label: '重难点', default: props.data.difficultPoint, type: 'textarea', key: 'difficultPoint' }
      ] } });
      let params = { id: props.data.id, ...formGroup };
      let res = await await $.http.post('/admin/teachTimes/saveOrUpdate', params);
      res.result && store.commit('edit_times', params);
    }
    
    const remove = async () => {
      setRemoveLoading(true)
      let res = await $.http.post(`/admin/teachTimes/deleteById/${props.data.id}`);
      setRemoveLoading(false)
      $.utils.message(res.result, '删除课次');
      res.result && store.commit('delete_times', props.data.id);
    }
    const removeHandout = async () => {
      await ElMessageBox.confirm('确认取消标准讲义吗？', { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' });
      let res = await $.http.post(`/admin/teachTimesHandoutRelation/deleteByIndexId`, { id: props.data.id });
      $.utils.message(res.result, '取消标准讲义');
      $.emitter.emit('class-times-change');
    }

    const addHandout = async () => {
      let title = '添加标准讲义';
      let result = await $.drawer.create({ title, width: 1080, zIndex: 2016, component: AddHandoutComponent });
      let res = await $.http.post('/admin/teachTimesHandoutRelation/saveOrUpdate', { indexId: props.data.id, type: result.filePath ? 1 : 2, handoutId: result.id });
      $.utils.message(res.result, title);
      $.emitter.emit('class-times-change');
    }

    const createHandout = async () => {
      let handout = await $.http.json('/admin/material/saveMaterial', { type: 2, fileName: props.data.indexName, isPublic: 0 });
      let res = await $.http.post('/admin/teachTimesHandoutRelation/saveOrUpdate', { indexId: props.data.id, type: 3, handoutId: handout.json.id });
      $.emitter.emit('class-times-change');
      // res.result && window.open(`/#/handout/false/${handout.json.id}/${planInfo.subjectId}`);
    }

    // const editHandout = async (handoutId) => window.open(`/#/handout/false/${handoutId}/${planInfo.subjectId}`);

    // const __postMessageFn = event => event.origin === window.location.origin && $.emitter.emit('class-times-change');
    // window.addEventListener('message', __postMessageFn);
    // onUnmounted(() => window.removeEventListener('message', __postMessageFn));

    const choiceClass = (data) => {
      emit('stepChange', data)
      store.commit('set_class_data', data)
    }
    return { handle, chinesNumber, edit, remove, removeLoading, addHandout, removeHandout, knowledgeList, createHandout, choiceClass }
  }
}
</script>

<style lang="scss" scoped>
.class-times-container {
  & > div:not(:last-child) {
    margin-bottom: 20px;
  }
  :deep(.el-dropdown) {
    display: block;
  }
  .times-item {
    outline: none;
    &.active {
      .item-header {
        background: #fff;
        border-left-color: #72b22a;
        box-shadow: 0px 1px 8px 0px rgba(72, 72, 72, 0.2);
      }
    }
    .item-header {
      display: flex;
      padding: 13px 20px;
      line-height: 28px;
      background: #EFF2F5;
      border-left: solid 5px #EFF2F5;
      border-radius: 4px;
      transition: all .2s;
      cursor: pointer;
      & > i {
        font-size: 20px;
        line-height: 28px;
        margin-right: 10px;
      }
      & > h4 {
        margin-right: 20px;
        font-size: 16px;
      }
      & > span {
        color: #999;
        i {
          color: #FAAD14;
          margin: 0 2px;
        }
      }
      .icon {
        width: 26px;
        height: 26px;
        margin-right: 10px;
        color: #3D3078;
        font-size: 16px;
        line-height: 26px;
        text-align: center;
        background: #F5F7FA;
        border-radius: 4px;
        transition: all .2s;
        &:active,
        &:hover {
          background: #ddd;
        }
        &:active {
          transform: scale(.9);
        }
        &.loading {
          pointer-events: none;
        }
      }
      .actions {
        margin-left: auto;
      }
      .el-button {
        border-radius: 14px;
      }
    }
    .item-content {
      border-radius: 6px;
      border: solid 1px #72b22a;
      border-top-color: transparent;
      overflow: hidden;
    }
    .item-child, .item-exam, .item-homework {
      padding: 10px 50px;
      .tip {
        color: $--color-remind;
      }
      .type-file {
        display: flex;
        & > p {
          margin-left: 20px;
          color: #333;
          font-size: 16px;
          line-height: 40px;
        }
      }
      .type-other {
        .item-title {
          display: flex;
          line-height: 20px;
          cursor: pointer;
          i {
            color: #999;
            font-size: 16px;
            line-height: inherit;
          }
          h4 {
            margin: 0 20px 0 10px;
          }
        }
        .item-main {
          margin-top: 17px;
          & > div {
            display: flex;
            padding-left: 43px;
            line-height: 54px;
            &:hover {
              background: #F5F7FA;
            }
            img {
              display: block;
              margin-right: 20px;
              height: 14px;
              margin-top: 20px;
            }
          }
        }
      }
    }
    .item-footer {
      display: flex;
      height: 52px;
      background: rgba(#FAAD14, .1);
      position: relative;
      overflow: hidden;
      &::before {
        content: '重难点';
        display: block;
        width: 70px;
        height: 100%;
        padding-left: 20px;
        color: #9F6E0C;
        line-height: 52px;
        font-size: 16px;
        background: #FCDB9B;
        box-sizing: border-box;
      }
      &::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 4px;
        border: solid 30px transparent;
        border-left-color: #FCDB9B;
        transform: scaleX(.7);
        position: absolute;
        bottom: 0;
        left: 60px;
        margin-bottom: -6px;
      }
      & > div {
        flex: 1 1 70px;
        padding: 0 20px 0 40px;
        font-size: 16px;
        line-height: 52px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>